<template>
    <div style="width: 100%">
      <el-descriptions
          class="margin-top full-width-height"
          title=个人信息
          :column="3"
          :size="size"
          border
      >
        <template slot="extra">
          <el-button type="primary" size="small"  @click="dialogFormVisible = true">编辑</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{user.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user-solid"></i>
            性别
          </template>
          {{user.gender}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            民族
          </template>
          {{user.nation}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-folder"></i>
            账号
          </template>
          {{user.account}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            密码
          </template>
          {{user.password}}
        </el-descriptions-item>
      </el-descriptions>
      <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="form.gender" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="民族" :label-width="formLabelWidth">
            <el-input v-model="form.nation" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="账号" :label-width="formLabelWidth">
            <el-input v-model="form.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import {xxx} from '../../../api/api'

export default {
  created () {
    this.user = JSON.parse(localStorage.getItem('user'))
    console.log(this.user)
  },
  data () {
    return {
      size: '',
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        gender: '',
        nation: '',
        account: '',
        password: ''
      },
      user: null,
      formLabelWidth: '120px'
    }
  },
  methods: {
    submit () {
      this.dialogFormVisible = false // 要注释掉的
      this.user = this.form
      xxx(this.form).then(res => { // xxx是接口名,要在api.js中定义
        if (res.status) {
          this.user = this.form
          this.dialogFormVisible = false
          this.user.name = res.data.name
        }
      })
    }
  }
}
</script>

<style scoped>
.full-width-height {
  height: 100%;
  width: 100%;
}
</style>
